<template>
  <div>
    <my-tabs :tab-list="tabList">
      <template v-slot="{ row }">
        <li
          class="item pointer"
          :class="{ active: routePath === row.path }"
          @click="handleClickMenu(row)"
        >
          {{ row.title }}
        </li>
      </template>
    </my-tabs>
    <div class="course-list">
      <div class="span" v-for="item in courseList" :key="item.course_id">
        <div class="item">
          <EduCourseImage
            :image="item.cover_url"
            :courseType="item.course_type"
            :width="200"
            :height="110"
            :border-radius="4"
            @click="handleNext(item.course_id)"
          ></EduCourseImage>
          <div class="title" @click="handleNext(item.course_id)">{{ item.title }}</div>
          <div class="earnings">{{ `累积收益：${item.sum}` }}</div>
        </div>
      </div>
    </div>
    <EduNoData v-if="$util.isEmpty(courseList)"></EduNoData>
    <EduPagination @handleCurrentChange="handleCurrentChange"></EduPagination>
  </div>
</template>

<script>
import MyTabs from '../components/myTab.vue'
import EduPagination from '@/components/EduPagination'
import EduNoData from '@/components/EduNoData'
import EduCourseImage from '@/components/EduCourseImage'
export default {
  components: {
    MyTabs,
    EduPagination,
    EduNoData,
    EduCourseImage
  },
  data() {
    return {
      tabList: [
        {
          path: '/my/finance/my_income',
          title: '推广收入'
        },
        {
          path: '/my/finance/my_course',
          title: '推广课程'
        },
        {
          path: '/my/finance/my_user',
          title: '推广用户'
        }
      ],
      courseList: [],
      routePath: this.$route.path
    }
  },
  created() {
    this.getCourseData()
  },
  methods: {
    getCourseData() {
      this.$api.getUserIncomeCourse(
        {
          page: this.$store.getters['paginate/page'],
          count: 16
        },
        res => {
          this.courseList = res.data.data
          this.$store.dispatch('paginate/setPaginate', {
            listRows: 16,
            total: res.data.flow.total
          })
        }
      )
    },
    // 分页
    handleCurrentChange() {
      this.getCourseData()
    },
    handleNext(id) {
      this.$router.push({ path: '/course/' + id })
    },
    handleClickMenu(data) {
      this.$router.push({
        path: data.path
      })
    }
  },
  destroyed() {
    this.$store.commit('paginate/SET_PAGINATE_DEFAULT')
  }
}
</script>

<style lang="scss" scoped>
.course-list {
  display: flex;
  flex-wrap: wrap;
  margin-left: -11px;
  margin-right: -11px;
  .span {
    width: 201px;
    padding: 0 11px;
    margin-bottom: 20px;
  }
  .item {
    .title {
      margin-top: 15px;
      font-size: 14px;
      font-weight: 400;
      color: $text-color-import;
      cursor: pointer;
      @include ellipsis();
    }
    .earnings {
      margin-top: 14px;
      font-size: 14px;
      font-weight: 500;
      color: $text-color-error;
    }
  }
}
</style>
